<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Konva.Animation 动画</title>
  <script src="/konva.min.js"></script>
</head>

<body>
  <h2>
    <p id="fpsDisplay">FPS: 0</p>
  </h2>
  <div id="container"></div>

</body>

</html>
<script>
  // 创建一个舞台
  var stage = new Konva.Stage({
    container: 'container',   // 绑定到容器
    width: window.innerWidth,
    height: window.innerHeight
  })

  // 创建一个层
  var layer = new Konva.Layer()
  stage.add(layer)

  // 创建一个圆形
  var circle = new Konva.Circle({
    x: stage.width() / 4,
    y: stage.height() / 2,
    radius: 50,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4
  })
  layer.add(circle)

  // 更新函数，移动圆形
  var anim = new Konva.Animation(function (frame) {

    /* 
        frame 为当前帧的信息，包含如下属性
        frame.time：当前帧的时间
        frame.timeDiff：当前帧和上一帧的时间差
        frame.frameRate：当前帧率

        frame.duration：当前帧的持续时间
        frame.frameIndex：当前帧的索引
        frame.lastFrameTime：上一帧的时间
        frame.firstFrameTime：第一帧的时间
        frame.lastFrameTimeDiff：上一帧和当前帧的时间差
        
    */
    // 增加圆的x坐标
    circle.x(circle.x() + 1)

    // 如果圆超出舞台宽度，从左边开始
    if (circle.x() > stage.width()) {
      circle.x(-50)
    }
    // 更新帧率显示
    document.getElementById('fpsDisplay').innerText = 'FPS: ' + Math.round(frame.frameRate)

    console.log('%c [  ]-68', 'font-size:13px; background:pink; color:#bf2c9f;', frame)

  }, layer)

  // 启动动画
  anim.start()
</script>